<script setup>
import * as monaco from "monaco-editor";
import { onMounted, ref } from "vue";

// 容器对象
const editorContainer = ref();

// 编辑器对象
let codeEditor = null;

// 声明一个input事件
const emit = defineEmits(["update:modelValue"]);

// 从父组件中接收
const props = defineProps({
  language: {
    type: String,
    default: "json",
  },
  modelValue: {
    type: String,
    default: "",
    required: true,
  },
});

onMounted(() => {
  codeEditor = monaco.editor.create(editorContainer.value, {
    value: props.modelValue,
    language: props.language,
    lineNumbers: "on",
    roundedSelection: false,
    scrollBeyondLastLine: false,
    readOnly: true,
    theme: "vs-dark",
    fontSize: 14,
  });

  // 设置监听事件
  codeEditor.onDidChangeModelContent(() => {
    emit("update:modelValue", codeEditor?.getValue());
  });
});
</script>

<template>
  <div ref="editorContainer" style="height: 94%; width: 100%" />
</template>

<style scoped></style>
